<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.4 赋值方式</title>
</head>
<body>
<span>
    我们使用 property: value; 的形式为 HTML 元素设置背景图片、颜色及其他基本属性，也可以使用简写形式——property: value value value;——指定单个属性的多个属性值，从而避免冗余。在简写时，一般用空格来分隔多个属性值
    <pre>
        <code>
            /* 最常用的方式 */
            property: value;

            /* 用逗号分隔属性值 */
            property: value, value, value;

            /* 用空格分隔属性值 */
            property: value value value;
        </code>
    </pre>
</span>
<span>
    涉及大小的属性可以用 calc 关键字进行计算。
    <pre>
        <code>
            /* 计算px */
            property: calc(value[px]);

            /* 也可以进行百分比和px 之间的计算 */
            property: calc(value[%] - value[px]);

            /* 同样可以进行百分比和百分比之间的计算 */
            property: calc(value[%] - value[%]);

            /* px 加px */
            property: calc(value[px] + value[px]);

            /* px减px */
            property: calc(value[px] - value[px]);

            /* px乘以px */
            property: calc(value[px] * value[px]);

            /* px除以px */
            property: calc(value[px] / value[px]);

            /* px乘以数值 */
            property: calc(value[px] * number);

            /* px除以数值 */
            property: calc(value[px] / number);

            /* 数值除以px是错误的 */
            property: calc(number / value[px]);
        </code>
    </pre>
    最后一个示例会报错。这是因为，在使用 calc 时，不能用数值除以指定的像素值。
</span>
</body>
</html>